<template>
	<div class="page">
		<div class="page-header">
			<h1 class="page-title">社会影响力统计</h1>
			<p class="page-subtitle">按类别/级别/年份/教师统计学术兼职与社会服务</p>
		</div>

		<el-card class="mb16">
			<el-form :inline="true" :model="query" label-width="100px">
				<el-form-item label="年份">
					<el-input v-model.number="query.year" placeholder="全部" style="width: 140px" />
				</el-form-item>
				<el-form-item label="教师ID">
					<el-input v-model.number="query.teacherId" placeholder="全部" style="width: 140px" />
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="loadStats">统计</el-button>
					<el-button @click="reset">重置</el-button>
				</el-form-item>
			</el-form>
		</el-card>

		<el-row :gutter="16">
			<el-col :span="12">
				<el-card>
					<h3>学术兼职</h3>
					<p>总数：{{ pos.total }}</p>
					<el-descriptions :column="1" title="按类别" v-if="pos.byCategory">
						<el-descriptions-item v-for="(v,k) in pos.byCategory" :key="'pc'+k" :label="k">{{ v }}</el-descriptions-item>
					</el-descriptions>
					<el-descriptions :column="1" title="按级别" v-if="pos.byLevel">
						<el-descriptions-item v-for="(v,k) in pos.byLevel" :key="'pl'+k" :label="k || '-'">{{ v }}</el-descriptions-item>
					</el-descriptions>
					<el-descriptions :column="1" title="按年份" v-if="pos.byYear">
						<el-descriptions-item v-for="(v,k) in pos.byYear" :key="'py'+k" :label="k">{{ v }}</el-descriptions-item>
					</el-descriptions>
					<el-descriptions :column="1" title="按教师" v-if="pos.byTeacher">
						<el-descriptions-item v-for="(v,k) in pos.byTeacher" :key="'pt'+k" :label="k">{{ v }}</el-descriptions-item>
					</el-descriptions>
				</el-card>
			</el-col>
			<el-col :span="12">
				<el-card>
					<h3>社会服务</h3>
					<p>总数：{{ svc.total }}</p>
					<el-descriptions :column="1" title="按类型" v-if="svc.byType">
						<el-descriptions-item v-for="(v,k) in svc.byType" :key="'st'+k" :label="k">{{ v }}</el-descriptions-item>
					</el-descriptions>
					<el-descriptions :column="1" title="按级别" v-if="svc.byLevel">
						<el-descriptions-item v-for="(v,k) in svc.byLevel" :key="'sl'+k" :label="k || '-'">{{ v }}</el-descriptions-item>
					</el-descriptions>
					<el-descriptions :column="1" title="按年份" v-if="svc.byYear">
						<el-descriptions-item v-for="(v,k) in svc.byYear" :key="'sy'+k" :label="k">{{ v }}</el-descriptions-item>
					</el-descriptions>
					<el-descriptions :column="1" title="按教师" v-if="svc.byTeacher">
						<el-descriptions-item v-for="(v,k) in svc.byTeacher" :key="'ss'+k" :label="k">{{ v }}</el-descriptions-item>
					</el-descriptions>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { academicPositionApi, socialServiceApi } from '@/api/academicSocial'

const query = reactive({ year: '', teacherId: '' })
const pos = ref({ total: 0 })
const svc = ref({ total: 0 })

const loadStats = async () => {
	const [p, s] = await Promise.all([
		academicPositionApi.stats({ year: query.year || undefined, teacherId: query.teacherId || undefined }),
		socialServiceApi.stats({ year: query.year || undefined, teacherId: query.teacherId || undefined })
	])
	pos.value = p?.data || p || { total: 0 }
	svc.value = s?.data || s || { total: 0 }
}

const reset = () => { Object.assign(query, { year: '', teacherId: '' }); loadStats() }

loadStats()
</script>

<style scoped>
.mb16 { margin-bottom: 16px; }
.page-header { margin-bottom: 16px; }
.page-title { margin: 0; font-size: 20px; }
.page-subtitle { margin: 4px 0 0 0; color: #666; }
</style> 